<script setup lang="ts">
  import { ref, reactive, watch, computed } from 'vue';
  import { TableRowSelection, Notification } from '@arco-design/web-vue';
  import { useBooleanStore } from '@/store';
  import {
    searchByPage,
    selectMsName,
    changeTaskToMsConsole,
  } from '@/api/sorting-matching';

  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });
  const showDrawer = ref<boolean>(false);

  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'id',
      slotName: 'id',
      align: 'center',
    },
    {
      title: '机型',
      dataIndex: 'productCode',
    },
    {
      title: '批次',
      dataIndex: 'batchNo',
    },
    {
      title: '起始架次',
      dataIndex: 'startPlaneNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '结束架次',
      dataIndex: 'endPlaneNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '工作包编号',
      dataIndex: 'packageCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '工作包名称',
      dataIndex: 'packageName',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '要求时间',
      dataIndex: 'requiredTime',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '工具包ID',
      dataIndex: 'msTaskPackageId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
  ];
  const localTableData = ref<any[]>([]);
  const rowSelection: TableRowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const selectedKeys = ref<any>([]);

  const productCode = ref<string>('');
  const batchNo = ref<string>('');
  const startPlaneNo = ref<string>('');

  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNumber = ref<number>(1);
  const pageSize = ref<number>(10);

  // 问题类型
  const consoleName = ref<string>('');
  const consoleNameList = ref<any[]>([]);

  const flowQueryData = ref({
    searchParams: computed(() => ({
      productCode: productCode.value,
      batchNo: batchNo.value,
      startPlaneNo: startPlaneNo.value,
    })),
    pageParameter: computed(() => ({
      rows: pageSize.value,
      page: pageNumber.value,
    })),
    startTime: '',
    endTime: '',
  });

  async function search() {
    const data = await searchByPage(flowQueryData.value);
    localTableData.value = data?.responseBody?.result || [];
    total.value = data?.responseBody?.pageParameter?.totalCount || 0;
  }
  async function getProblemType() {
    const data = await selectMsName({});
    consoleNameList.value = data.responseBody;
  }
  function reset() {
    productCode.value = '';
    batchNo.value = '';
    startPlaneNo.value = '';
    search();
  }
  // 监听弹框
  watch(
    () => booleanStore.boolValue,
    (newValue: boolean) => {
      if (booleanStore.num === 6) showDrawer.value = newValue;
      search();
      getProblemType();
      productCode.value = '';
      batchNo.value = '';
      startPlaneNo.value = '';
      localTableData.value = [];
      selectedKeys.value = [];
    }
  );

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool(6);
    }
  }
  function handleCancel() {
    booleanStore.toggleBool(6);
  }
  async function handleOk() {
    if (selectedKeys.value.length === 0) {
      Notification.warning({
        title: '提示',
        content: '请选择工具包数据',
        closable: true,
      });
      return;
    }
    if (consoleName.value === '') {
      Notification.warning({
        title: '提示',
        content: '请选择接收台',
        closable: true,
      });
      return;
    }
    const info = {
      CONSOLENAME: consoleName.value,
      taskPackages: selectedKeys.value,
    };
    const data: any = await changeTaskToMsConsole(info);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
      booleanStore.toggleBool(6);
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
      booleanStore.toggleBool(6);
    }
    booleanStore.watchUpdate(10);
  }
  function change(e: any) {
    pageNumber.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
  watch([pageNumber, pageSize], () => {
    search();
  });
</script>

<template>
  <a-drawer
    width="70%"
    :height="340"
    :visible="showDrawer"
    placement="right"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <template #title> 故障改派</template>

    <a-card :header-style="hStyle" :bordered="false">
      <template #title>
        <div class="font">查询条件</div>
      </template>
      <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
        <a-col :span="6">
          <div>
            <a-input v-model="productCode" placeholder="机型" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input v-model="batchNo" placeholder="批次" size="large" />
          </div>
        </a-col>
        <a-col :span="6">
          <div>
            <a-input
              v-model="startPlaneNo"
              placeholder="起始架次"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">
          <a-button type="primary" size="large" @click="search">查询</a-button>
          <a-button type="primary" class="btn-reset" size="large" @click="reset"
            >重置</a-button
          >
        </a-col>
      </a-row>
    </a-card>

    <a-card :header-style="hStyle" :bordered="false">
      <template #title>
        <div class="font">工作包数据</div>
      </template>
      <a-table
        v-model:selectedKeys="selectedKeys"
        :stripe="true"
        class="top-table"
        :pagination="false"
        row-key="msTaskPackageId"
        :columns="columns"
        :data="localTableData"
        :row-selection="rowSelection"
      >
        <template #id="{ recode }">{{
          localTableData.indexOf(recode) + 1
        }}</template>
      </a-table>
      <div class="page-position">
        <a-pagination
          :total="total"
          :current="pageNumber"
          :page-size="pageSize"
          show-total
          show-jumper
          show-page-size
          @change="change"
          @update:page-size="changeSize"
        />
      </div>
    </a-card>
    <a-card :header-style="hStyle" :bordered="false">
      <template #title>
        <div class="font">选择分拣台</div>
      </template>
      <a-col :span="6">
        <a-select v-model="consoleName" placeholder="选择机型" size="large">
          <a-option v-for="(item, index) in consoleNameList" :key="index">{{
            item
          }}</a-option>
        </a-select>
      </a-col>
    </a-card>
  </a-drawer>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .row-top {
    margin-top: 10px;
  }
  .btn-reset {
    margin-left: 10px;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
